import React, { PureComponent } from "react";
import s from "./index.scss";
import { Flex } from "antd-mobile";

import bao3 from "assets/images/bao3.png";
import look from "assets/images/threeapp/look.png";
import zt1 from "assets/images/threeapp/zt1.png";
import golook from "assets/images/golook.png";
import baoxian2 from "assets/images/threeapp/baoxian2.png";

import QueueAnim from 'rc-queue-anim'

import {hashHistory} from "React-Router";


export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      
    };
  }
  
  componentDidMount() {
  
  }
   //销毁时解绑事件
  componentWillUnmount() {
    //重写组件的setState方法，直接返回空
    this.setState = (state,callback)=>{
      return;
    };  
  }
  
  

  render() {
    let {detail} = this.props
    return (
      <div>
      <QueueAnim type="bottom" leaveReverse>
       <Flex className={`${s.one}`}  key="a">
            <Flex.Item>
              <Flex direction="column">
                <Flex.Item
                  className={`${s.oneATop} ${s.oneTopBox} ${s.baoParent}`}
                >
                  {detail.loanInfo.annualrate}% <img className={`${s.bao}`} src={bao3} />
                </Flex.Item>
                <Flex.Item>原标收益率</Flex.Item>
              </Flex>
            </Flex.Item>
            <Flex.Item>
              <Flex direction="column">
                <Flex.Item className={`${s.oneTopBox}`}>{detail.loanInfo.termcount}个月</Flex.Item>
                <Flex.Item>剩余期限</Flex.Item>
              </Flex>
            </Flex.Item>
            <Flex.Item>
              <Flex direction="column" onClick={()=>{
                hashHistory.push('/projectList/Detail/LoanContract')
              }}>
                <Flex.Item className={`${s.oneTopBox}`}>
                  <img src={look} />
                </Flex.Item>
                <Flex.Item>查看协议范本</Flex.Item>
              </Flex>
            </Flex.Item>
          </Flex>

          <Flex
            direction="row"
            justify="end"
            align="center"
            className={`${s.tow}`}
            style={{
              background: `url(${zt1}) no-repeat`,
              "backgroundSize": "100% 100%"
            }}
            key="b"
          >
            <div
              className={`${s.towCircle}`}
              style={{
                background: `linear-gradient(to top, #93C9FF ${detail.loanInfo.progress}%, rgb(255, 255, 255) 0px,#fff ${detail.loanInfo.progress}%)`
              }}
            >
              {detail.loanInfo.progress}%
            </div>
          </Flex>
          <Flex
            direction="row"
            justify="center"
            align="center"
            className={`${s.three}`}
            key="c"
          >
            <img src={baoxian2} />
            <span>账户资金安全由太平洋保险承保</span>
          </Flex>
          <div className={`${s.four}`} key="d">
          <QueueAnim type={['right', 'left']} leaveReverse>
            <Flex className={`${s.item}`} key="a">
              <Flex.Item>项目名称</Flex.Item>
              <Flex.Item className={`${s.right}`}>{detail.loanInfo.title}</Flex.Item>
            </Flex>

            <Flex className={`${s.item}`} key="b">
              <Flex.Item>项目规模</Flex.Item>
              <Flex.Item className={`${s.right}`}>{detail.loanInfo.amount}</Flex.Item>
            </Flex>

            <Flex className={`${s.item}`} key="c">
              <Flex.Item>剩余金额</Flex.Item>
              <Flex.Item className={`${s.right}`}>{detail.loanInfo.investleft}</Flex.Item>
            </Flex>

            <Flex className={`${s.item}`} key="d">
              <Flex.Item>可投金额</Flex.Item>
              <Flex.Item className={`${s.right}`}>{detail.loanInfo.canInvestAmount}</Flex.Item>
            </Flex>

            <Flex className={`${s.item}`} key="e">
              <Flex.Item>还款方式</Flex.Item>
              <Flex.Item className={`${s.right}`}>{detail.loanInfo.repayTypeStr}</Flex.Item>
            </Flex>

            <Flex className={`${s.item}`} key="f">
              <Flex.Item>截止日期</Flex.Item>
              <Flex.Item className={`${s.right}`}>{detail.loanInfo.openEndTime}</Flex.Item>
            </Flex>
            </QueueAnim>
          </div>
          <Flex  key="e" direction="row" align="center">
              <Flex.Item className={`${s.center} ${s.lookDetail}`}>
                <img src={golook}/>
              </Flex.Item>
          </Flex>
         
        </QueueAnim>
    
     
      </div>
    );
  }
}
